<template>
    <div>
      <a-modal
        :width="800"
        :title="title"
        :visible.sync="modalVisible"
        @cancel="handleCancleDbSync"
      >
        <template slot="footer">
          <a-button @click="handleCancleDbSync">
            关闭
          </a-button>
          <a-button type="primary" :loading="syncLoading" @click="handleDbSync" >确定</a-button>
        </template>
        <div class="table-page-search-wrapper">
          <a-form-model  ref="ruleForm" v-bind="layout"  :model="formData"  :rules="rules">
              <!-- <a-form-model-item label="催办类型" prop="processName">
                  <a-checkbox-group v-model="formData.notifyType">
                      <a-checkbox :value="1" name="type">
                      系统通知
                      </a-checkbox>
                      <a-checkbox :value="2" name="type">
                      邮件
                      </a-checkbox>
                  </a-checkbox-group>
              </a-form-model-item> -->
              <a-form-model-item label="催办内容" prop="remarks">
                <a-input v-model="formData.remarks" type="textarea"/>
              </a-form-model-item>
          </a-form-model>
            <!-- <a-tabs default-active-key="1" >
                <a-tab-pane key="1">
                    <span slot="tab">
                        <a-icon type="file-text" />
                        催办
                    </span>
                    <a-form-model  ref="ruleForm" v-bind="layout"  :model="formData"  :rules="rules">
                        <a-form-model-item label="催办类型" prop="processName">
                            <a-checkbox-group v-model="formData.notifyType">
                                <a-checkbox :value="1" name="type">
                                系统通知
                                </a-checkbox>
                                <a-checkbox :value="2" name="type">
                                邮件
                                </a-checkbox>
                            </a-checkbox-group>
                        </a-form-model-item>
                        <a-form-model-item label="催办内容" prop="remarks">
                            <a-input v-model="formData.remarks" type="textarea"/>
                        </a-form-model-item>
                        <a-form-model-item :wrapper-col="{ span: 14, offset: 4 }" >
                            <a-button type="primary" :loading="syncLoading" @click="handleDbSync" >保存</a-button>
                        </a-form-model-item>
                    </a-form-model>
                </a-tab-pane>
                <a-tab-pane key="2">
                    <span slot="tab">
                      <a-icon type="user" />
                        我提醒的
                    </span>
                    <a-table
                      size="middle"
                      bordered
                      row-key="id"
                      :columns="columns"
                      :data-source="dataSource"
                    />
                </a-tab-pane>
            </a-tabs> -->
        </div>
      </a-modal>
    </div>
</template>
<script>
import { postAction, putAction } from '@/api/manage'
import { urging } from '@/api/task'
export default {
  name: 'urgingModal',
  data() {
    return {
      modalVisible: false,
      title: '催办提醒',
      syncLoading: false,
      url: {
        list: '/online/cgform/head/list',
        edit: 'diagram/diagramConfiguration/edit',
        add: 'diagram/diagramConfiguration/add'
      },
      rules: {
        remarks: [
          { required: true, message: '请输入催办内容', trigger: 'change' }
        ]
      },
      formData: {
        'notifyType': [1, 2],
        'remarks': ''
      },
      layout: {
        labelCol: { span: 4 },
        wrapperCol: { span: 14 }
      },
      dataSource: [],
      columns: [
        {
          title: '#',
          dataIndex: '',
          key: 'rowIndex',
          width: 60,
          align: 'center',
          customRender: function(t, r, index) {
            return parseInt(index) + 1
          }
        },
        {
          title: '流程名称',
          align: 'center',
          dataIndex: 'prcocessDefinitionName'
        },
        {
          title: '任务名称',
          align: 'center',
          dataIndex: 'processInstanceId'
        },
        {
          title: '任务处理人',
          align: 'center',
          dataIndex: 'startTime'
        },
        {
          title: '催办时间',
          align: 'center',
          dataIndex: 'endTime'
        },
        {
          title: '催办类型',
          align: 'center',
          dataIndex: 'assigneeName'
        },
        {
          title: '催办说明',
          align: 'center',
          dataIndex: 'ramerk'
        }
      ]
    }
  },
  created() {

  },
  methods: {
    handleCancleDbSync() { // 关闭
      this.modalVisible = false
    },
    handleDbSync(item) { // 弹窗点击确定
      urging({ procInstId: item.processInstanceId }).then(res => {
        if (res.success) {
          this.$message.success('催办成功')
          this.modalVisible = false
        } else {
          this.$message.warning(res.message)
        }
      })
      // this.$refs['ruleForm'].validate(valid => {
      //   if (valid) {
      //     this.updateData()
      //   } else {
      //     console.log('error submit!!')
      //     return false
      //   }
      // })
    },
    updateData(params) { // 保存提交数据
      if (this.formData.id) {
        putAction(this.url.edit, this.formData).then((res) => {
          if (res.success) {
            this.$message.success(res.message)
            this.modalVisible = false
            this.$emit('modalFormOk')
          } else {
            this.$message.warning(res.message)
          }
        }).finally(() => {
          // this.loading = false
        })
      } else {
        postAction(this.url.add, this.formData).then((res) => {
          if (res.success) {
            this.$message.success(res.message)
            this.modalVisible = false
            this.$emit('modalFormOk')
          } else {
            this.$message.warning(res.message)
          }
        }).finally(() => {
          // this.loading = false
        })
      }
    }
  }
}
</script>
<style lang="less">

</style>
